<template>
	<view class="container">
		<view class="head">
			<view class="flex-ja-bc">
				<view class="flex">
					<view class="img margin-10-r margin-10-l">
						<image src="/static/kefu1.png" mode="" class="avatar"></image>
						<image class="badge" src="/static/vip.png" mode=""></image>
					</view>
					<view class="flexc-ja-cs">
						<view class="flex fbold">
							<view class="fbold margin-10-r">
								{{userinfo.nickname}}
							</view>
							<view class="vip">
								{{userinfo.viplevelname}}
								<!-- 钻石 -->
							</view>
						</view>
						<view class="f14">
							{{userinfo.phone}}
						</view>
					</view>
				</view>
			</view>
			<view class="yangshi"></view>
			
		</view>
		<view class="item" v-for="(item, index) in list" :key="index">
			<view class="flex-ja-bc">
				<view class="video">
					<video class="video" src="/static/video1.mp4" controls></video>
				</view>
				<view class="content">
					<view class="title ellipsis f16">
						{{item.content}}
					</view>
					<view class="flex-ja-bc info">
						<view class="">
							{{item.create_time_cn}}
						</view>
						<view class="score" v-if="item.score">
							{{item.score}}
						</view>
						<template v-else>
							<view class="tag" v-if="from == user">
								待评分
							</view>
							<view class="tag" @click="togglePopup()" v-else>
								去评分
							</view>
						</template>
					</view>
				</view>
			</view>
	
		</view>
		<view class="mask" v-show="popupshow" @click="togglePopup(true)" ></view>
		<view class="popup" v-show="popupshow">
			<view class="icon">
				<image class="wh100" src="/static/edit.png" mode=""></image>
			</view>
			<view class="content">
				<view class="flexc-ja-cc margin-20-b">
					<!-- <view class="">
						请输入分值：
					</view> -->
					<uni-rate v-model="score" class="rate" @change="onRate"></uni-rate>
					<input type="text" placeholder="输入评语" v-model="content" class="input" />
				</view>
				<view class="flex-ja-ac">
					<view class="tag cancel" @click="togglePopup(true)">
						取消
					</view>
					<view class="tag" @click="onSubmit">
						提交
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniRate from '@/components/htz-rate/htz-rate.vue'
	export default {
		components:{
			uniRate
		},
		data() {
			return {
				from: '',
				score: 1,
				content: '',
				popupshow: false,
				userinfo: {},
				list: []
			};
		},
		created:function(){
		},
		watch: {

		},
		onLoad(e) {
			this.userinfo = uni.getStorageSync('userinfo');
			this.from = e.from
			let BASE_URL=uni.BASE_URL
			uni.request({
				url: BASE_URL+'index/user/get_clockin',
				data: {
					type: this.from,
					id: this.userinfo.id,
				},
				method:'POST',
				success:(res) =>{
					console.log(res.data);
					if(res.data.code=="0"){
						this.list = res.data.data
					}else{
						uni.showToast({
							title: res.data.msg,
							duration: 2000,
							icon:'none'
						});
					}
				},
				fail:(res)=> {
					console.log(res.data);
				}
			});
		},
		methods: {
			togglePopup(close){
				if(close) {
					this.popupshow = false;
					return;
				}
				this.popupshow = !this.popupshow
			},
			
			onSubmit() {
				uni.request({
					url: BASE_URL+'index/user/clockin_score',
					data: {
						score:score,
						content:content
					},
					method:'POST',
					success:(res) =>{
						console.log(res.data);
						if(res.data.code=="0"){
							uni.showToast({
								title: res.data.msg,
								duration: 1500
							});
							uni.navigateBack({
								delta:1
							});
						}else{
							uni.showToast({
								title: res.data.msg,
								duration: 2000,
								icon:'none'
							});
						}
					},
					fail:(res)=> {
						console.log(res.data);
					}
				});
			}

		}

	}
</script>

<style lang="scss">
	.flex-ja-bc{
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.flex-ja-ac{
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	.flexc-ja-cs{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
	}
	.flexc-ja-cc{
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	.flex-ja-cc{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.flex{
		display: flex;
	}
	.inlb{
		display: inline-block;
	}
	.tcenter{
		text-align: center;
	}
	.margin-10-l{
		margin-left: 10px;
	}
	.margin-10-r{
		margin-right: 10px;
	}
	.margin-20-b{
		margin-bottom: 20px;
	}
	.wh100{
		width: 100%;
		height: 100%;
	}
	.img{
		width: 80px;
		height: 80px;
		border-radius: 50%;
		position: relative;
		//overflow: hidden;
		.avatar{
			width: 100%;
			height: 100%;
			border-radius: 50%;
		}
		.badge{
			position: absolute;
			right: 0px;
			bottom: 0px;
			width: 25px;
			height: 25px;
			border-radius: 50%;
		}
	}
	.p10{
		padding: 10px;
	}
	.ellipsis{
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}
	.f16{
		font-size: 16px;
	}
	.video{
		width: 100%;
		height: 100%;
	}
	.tag{
		padding: 2px 10px;
		border: 1px solid #6A7AFE;
		border-radius: 20px;
		color: #6A7AFE;
	}
	.cancel{
		border: 1px solid #ccc;
		color: #ccc;
	}
		
	.mask{
		position: fixed;
		left: 0;
		top: 0;
		bottom: 0;
		right: 0;
		z-index: 2;
		background: rgba($color: #000000, $alpha: 0.5);
	}
	.popup{
		position: absolute;
		width: 80%;
		height: 200px;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		background: #fff;	
		z-index: 2;
		
		.icon{
			position: absolute;
			left: 50%;
			top: -25px;
			width: 50px;
			height: 50px;
			margin-left: -25px;
		}
		.content{
			padding: 50px 15px 0;
			.rate{
				margin: 0 auto 20px;
			}
			.input{
				height: 25px;
				width: 100%;
				padding: 2px;
				border: 1px solid #eee;
				border-radius: 5px;
				font-size: 12px;
			}
		}
	}
	.container {
		view {
			box-sizing: border-box;
		}
		background: #fff;
		.head{
			position: relative;
			height: 150px;
			padding: 30px 0 0;
			background: #6A7AFE;
			color: #fff;
			.yangshi{
				position: absolute;
				bottom: 0;
				width: 100%;
				height: 10px;
				background: #fff;
				border-radius: 30px 30px 0 0;
			}
			.vip{
				padding: 2px 10px;
				background: #FE9E33;
				border-radius: 10px;
				color: #fff;
				font-size: 14px;
			}
		}
		.item{
			padding: 10px 10px 10px;
			background-color: #FFFFFF;
			.content{
				padding-left: 10px;
				overflow: hidden;
				.info{
					color: #808080;
					margin-top: 30px;
				}
			}
			.video{
				min-width: 150px;
				height: 100px;
				border-radius: 10px;
				overflow: hidden;
			}
		}
	}
</style>

